<template>
    <div class="detail-comment">
        <detail-section title="热门评论" :more-text="`查看全部${commentData.totalCount}条评论`">
            <div class="comment-innner">
                <div class="header">
                    <div class="left">
                        <span>{{ commentData.overall }}</span>
                        <i></i>
                    </div>
                    <div class="centre">
                        <span>{{ commentData.scoreTitle }}</span>
                        <span class="commentCount">{{ commentData.totalCount }}条评论</span>
                        <van-rate v-model="commentData.totalCount" 
                                  readonly allow-half  size="14px"/>
                    </div>
                    <div class="right">
                        <template v-for="item in commentData.subScores">
                            <span class="evaluate">{{ item }}</span>
                        </template>
                    </div>
                </div>
                <div class="tags">
                    <template v-for="item in commentData.commentTagVo">
                        <span class="tag">{{ item.text }}</span>
                    </template>
                </div>
                <div class="content">
                    <comment-section :img-url="comment.userAvatars"
                                     :name="comment.userName"
                                     :date="comment.checkInDate"
                                     :content-text="comment.commentDetail" >
                    </comment-section>
                </div>
            </div>
        </detail-section>
    </div>
</template>

<script setup>
    import detailSection from "@/components/detail-section/detail-section.vue";
    import commentSection from "@/components/comment-section/comment-section.vue";

    const props = defineProps({
        commentData:{
            type:Object,
            default:() => ({})
        }
    })

    const { comment } = props.commentData
</script>


<style lang='less' scoped>
.comment-innner {
    .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left {
            font-size: 44px;
            font-weight: 700;
            line-height: 32px;
            i {
                display: block;
                width: 100%;
                height: 8px;
                border-radius: 5px;
                background-color: var(--primary-color);
            }
        }
        .centre {
            display: flex;
            flex-direction: column;
            font-size: 13px;
            width: 32%;
            .commentCount {
                color: #888;
                margin: 2px 0;
            }
        }
        .right {
            display: flex;
            flex-wrap: wrap;
            width: 45%;
            font-size: 13px;
            .evaluate {
                width: 50%;
                color: #888;
                margin: 2px 0;
            }
        }
    }
    .tags {
        display: flex;
        flex-wrap: wrap;
        margin: 6px 0;
        .tag {
            padding: 2px 4px;
            background-color: #f2f2f2;
            border-radius: 8px;
            font-size: 13px;
            color: #666;
            margin: 3px 0;
            margin-right: 8px;
        }
    }
}
</style>